<script setup lang="ts">
import type { ImageProps } from 'element-plus'
</script>

<template>
  <div class="block text-center">
    <span class="demonstration">
      Oustanding film in history
    </span>
    <el-carousel height="400px" style="width:1200px;" type="card">
      <!-- <el-carousel-item v-for="item in 4" :key="item"> -->
      <el-carousel-item>
        <img src="../assets/category/爱情.jpeg" alt="">
      </el-carousel-item>
      <el-carousel-item>
        <img src="../assets/category/剧情.jpeg" alt="">
      </el-carousel-item>
      <el-carousel-item>
        <img src="../assets/category/纪录.jpeg" alt="">
      </el-carousel-item>
      <el-carousel-item>
        <img src="../assets/category/动画.jpeg" alt="">
      </el-carousel-item>

    </el-carousel>

    <div class="outbox">
      <div class="innerbox">爱情</div>
      <img  src="../assets/category/爱情.jpeg" alt="">
    </div>
    <div class="outbox">
      <div class="innerbox">剧情</div>
      <img  src="../assets/category/剧情.jpeg" alt="">
    </div>
    <div class="outbox">
      <div class="innerbox">纪录</div>
      <img  src="../assets/category/纪录.jpeg" alt="">
    </div>
    <div class="outbox">
      <div class="innerbox">动画</div>
      <img  src="../assets/category/动画.jpeg" alt="">
    </div>


    
  </div>

</template>

<style>
.demonstration {
  color: var(--el-text-color-secondary);
}

.el-carousel__item h3 {
  color: #475669;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
  text-align: center;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}

 /* 电影列表样式  */
.outbox {
  position: relative;
  overflow:hidden;
}

.innerbox {
  height: 450px;
  width: 800px;
  background-color: black;
  margin-left: 200px;
  margin-top: 100px;
  opacity: 0.7;
  position: absolute;
  text-align: center;
  font-size: 100px;
  line-height: 400px;
  transition:all 1.5 ease;
  cursor: pointer;
  /* margin: 0px; */
}
.innerbox:hover{
  /* transform: scale(1.2); */
  font-size: 130px;
}

.outbox>img {
  margin-top: 100px;
  width: 800px;
  margin-left: 200px;
}
</style>